import logo from './logo.svg';
import './App.css';
import React,{useState,useEffect} from 'react';
import axios from 'axios'
import FU from './view/FU';
function App() {
  let [bei,setList] = useState([])
  let [wen,setWen] = useState([])
  let [ka,setKa] = useState([])
  let [tang,setTang] = useState([])
  useEffect(()=>{
    axios.get('http://localhost:3000/bei').then((res)=>{
      setList(res.data)
    })
    axios.get('http://localhost:3000/wen').then((res)=>{
      setWen(res.data)
    })
    axios.get('http://localhost:3000/ka').then((res)=>{
      setKa(res.data)
    })
    axios.get('http://localhost:3000/tang').then((res)=>{
      setTang(res.data)
    })
  },[])
  let [one,setOne]= useState(0)
  let [two,setTwo]= useState(0)
  let [san,setSan]= useState(0)
  let [si,setSi]= useState(0)
  return (
    <div className="App">
      <ul>
        <li>
          <h3>杯型</h3>
          <ul className='list'>
            <FU conf={bei} code={one} setCode={setOne}/>
          </ul>
        </li>
        <li>
          <h3>温度</h3>
          <FU conf={wen} code={two} setCode={setTwo}/>
        </li>
        <li>
          <h3>咖啡豆</h3>
          <FU conf={ka} code={san} setCode={setSan}/>
        </li>
        <li>
          <h3>糖度</h3>
            <FU conf={tang} code={si} setCode={setSi}/>
        </li>
      </ul>
    </div>
  );
}

export default App;
